<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华米账号-手机验证码登录</title>
    <link rel="stylesheet" href="../css/pc-ggys.css">
    <link rel="stylesheet" href="../css/phone.css">

</head>

<body>
    <div class="b_top">
        <div class="top">
            <div><img src="https://id1.cloud.huawei.com/CAS/static_rss/rss_92/IDMW/common/logos/HUAWEI.svg" alt="">
            </div>
            <div class="mc"><span style="margin: 8px;">丨</span><span>华为商城</span></div>
        </div>
    </div>
    <div class="b_title">
        <div class="title">
            <span>短信验证码登录</span>
        </div>
    </div>
    <div class="b_box">
        <div class="box">
            <div class="left">
                <span class="dlm"><img src="../img/ewmtp.jpg" alt=""></span>
                <span>若您使用华为手机，请进入“设置”>“华为帐号”扫码登录。</span>
            </div>
            <div class="zhong">
                <span class="xian"></span>
            </div>
            <div class="right">
                <form action="">
                    <span class="sjhts">注意输入手机号</span>
                    <input type="text" class="phone" placeholder="请输入您的手机号">
                    <input type="password" class="captcha" placeholder="请输入验证码" style="margin-top: 15px;">
                </form>
                <div class="yzbox">
                    <button class="yzbtn" id="sendbtn">获取验证码</button><button id="resetbtn">重置</button>
                    <a href="../html/01login.html" style="margin-top: 15px;">密码登录</a>
                </div>
                <button id="dlbtn" style="margin:20px 0px">登录</button>
                <div class="qtwt">
                    <span><a href="./02reg.html">注册</a></span>
                    <span>丨</span>
                    <span><a href="">忘记密码</a></span>
                    <span>丨</span>
                    <span><a href="">遇到问题</a></span>
                </div>
            </div>
        </div>
    </div>

    <div class="foot">
        <div class="foot_s">
            <span><a href="">华为帐号用户协议</a></span>
            <span>丨</span>
            <span><a href="">关于华为帐号与隐私的声明</a></span>
            <span>丨</span>
            <span><a href="">常见问题</a> </span>
            <span>丨</span>
            <span><a href="">Cookies</a></span>
            <br>
        </div>
        <div class="foot_x">
            <p>华为帐号 版权所有 © 2011-2022</p>
        </div>
    </div>


    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="../js/ajax.js"></script>
    <script>


        const oBtn = document.querySelector('#dlbtn');
        const oPhone = document.querySelector('.phone');
        const oSjhts = document.querySelector('.sjhts');
        const oCap = document.querySelector('.captcha');
        const oYzbtn = document.querySelector('.yzbtn');
        //边输入边判断 两个框都有值 登录高亮
        oPhone.oninput = function () {
            var usjh = oPhone.value.trim();
            // 2.验证手机号为空否
            if (/^.{0}$/.test(usjh)) {
                oSjhts.innerHTML = '输入不能为空哟！';
                oSjhts.style.color = 'red';
                oYzbtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                oYzbtn.disabled = true;
            }
            // 3.验证手机号合法否
            else if (/^1[3-9]\d{9}$/.test(usjh)) {
                oSjhts.innerHTML = '手机号验证成功';
                oSjhts.style.color = 'green';
                oYzbtn.style.cssText += "background:#ca141d;cursor:pointer;"
                oYzbtn.disabled = false;
            }
            else {
                oSjhts.innerHTML = '非法手机号';
                oSjhts.style.color = 'red';
                oYzbtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                oYzbtn.disabled = true;
            }

            if (oPhone.value && oCap.value) {
                oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            }
            else {
                oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            }
        }
        oCap.oninput = function () {
            if (oPhone.value && oCap.value) {
                oBtn.style.cssText += "background:#ca141d;cursor:pointer;"
            } else {
                oBtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
            }
        }


        oYzbtn.onclick = function () {
            if(oPhone.value){
                // 点击后添加禁用属性
            this.disabled = true;
            //设置倒计时
            var count = 60;
            oYzbtn.innerHTML = count + 's后再次发送';
            var t = setInterval(function () {
                oYzbtn.style.cssText += "background:rgba(202,20,29,.5);cursor:not-allowed;"
                count--;
                oYzbtn.innerHTML = count + 's后再次发送';
                if (count === 0) {
                    clearInterval(t);
                    oYzbtn.style.cssText += "background:#ca141d;cursor:pointer;"
                    oYzbtn.innerHTML = '获取验证码';
                    oYzbtn.disabled = false;
                }
            }, 1000)
            }else{
                alert('未获取到手机号')
            }

        }

        // 正则
        var reg = {
            phone: /^1(3|4|5|6|7|8|9)\d{9}$/,
            code: /^\d{4}$/
        }

        $(function () {
            // 初始化默认不可点击
            // $("#sendbtn").prop("disabled", true)

            // 判断发送验证码是否可以点击 
            // $(".phone").on('input', function () {
            //     console.log($(this).val())
            //     if (reg.phone.test($(this).val())) {
            //         $("#sendbtn").prop("disabled", false)
            //     } else {
            //         $("#sendbtn").prop("disabled", true)
            //     }
            // })

            // 重置数据 
            $("#resetbtn").on("click", function () {
                $(".phone").val('')
                $(".captcha").val('')
            })

            // 发送验证码
            $("#sendbtn").click(function () {
                // 数据库查询   判断当前的手机号是否已经被注册 
                getCaptcha({
                    phone: $(".phone").val()
                }).then(res => {
                    console.log(res)
                    // res.code==200 && alert('验证码发送成功')
                })
            })

            // 校验验证码
            $("#dlbtn").click(async function () {
                var phone = $(".phone").val()
                var captcha = $(".captcha").val()

                if (phone && captcha) {
                    if (reg.phone.test(phone) && reg.code.test(captcha)) {
                        // 登录操作
                        let res = await verifyCaptcha({
                            phone,
                            captcha
                        }).catch(err => {
                            alert('验证码错误')
                        })
                        if (res.code == 200) {
                            $("#resetbtn").click()
                            alert('登录成功')
                            localStorage.setItem('LOGIN_USER', phone);
                            location.href = './06home.html';
                        } else {
                            alert('验证码错误')
                        }
                    } else {
                        alert("请输入正确的手机号或者验证码")
                    }
                } else {
                    alert("请先输入手机号或者验证码")
                }

            })
        })






        // oBtn.onclick = async function () {
        //     const username = oUser.value;
        //     const userpwd = oPwd.value;
        //     const usersjh = oUser.value;
        //     const usereml = oUser.value;

        //     if (username && userpwd && usersjh && usereml) {
        //         const res = await login({
        //             username,
        //             userpwd,
        //             usersjh,
        //             usereml
        //         }).then(data => {
        //             console.log(data);
        //             const { status, msg } = data;
        //             if (status) {
        //                 alert(msg);
        //                 // 跳转至其他页面
        //                 // 把登录的账号保存
        //                 localStorage.setItem('LOGIN_USER', username);
        //                 //成功之后去哪 从哪来跳哪去
        //                 const url = location.search.replace('?WZA=', '');
        //                 if (url) {
        //                     location.href = url;
        //                 } else {
        //                     // location.href = '../html/005列表整合.html';
        //                     location.href = './003列表.html';
        //                 }

        //             } else {
        //                 alert(msg);
        //             }
        //         })
        //     }
        // }







    </script>

</body>

</html>